
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>DOM操作-练习</title>
		<style type="text/css">
			body {
				font-size: 13px;
				line-height: 25px;
			}
			
			table {
				border-top: 1px solid #333;
				border-left: 1px solid #333;
				width: 300px;
			}
			
			td {
				border-right: 1px solid #333;
				border-bottom: 1px solid #333;
			}
			
			.center {
				text-align: center;
			}
		</style>
		<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
		<script> //219971201毕潇元
			function addRow(){  //增加一行
				var td=$("<tr><td>幸福从天而降</td><td>&yen;18.50<td></tr>")//将获取的内容更改为节点
				$("table").append(td);//将添加的内容添加到table最后				
			}
				//标题行设置为字体加粗、文本居中显示，背景颜色为灰色
			function updateRow() {  //修改标题样式
				// var uRow = document.getElementById("row1");
				//标题行设置为字体加粗、文本居中显示，背景颜色为灰色
				// uRow.setAttribute("style", "font-weight:bold;text-align:center;background-color: #cccccc;");
				//修改样式
				$("#row1").css({ 'fontWeight':'blod', 'textAlign':'center', 'backgroundColor': '#cccccc'});
			}
			function delRow() {  //删除第二行
				// var dRow = document.getElementsByTagName("tr"); //访问被删除的行
				// if(dRow[2]!=null){
				// 	dRow[2].parentNode.removeChild(dRow[2]); //删除行	
				$("tr").remove("tr:eq(2)");//删除第二行
			}
			function copyRow() { //复制最后一行
				//var oldRow = document.getElementById("row3"); //访问复制的行
				//var newRow = oldRow.cloneNode(true); //复制指定的行及子节点
				//document.getElementById("myTable").appendChild(newRow); //在指定节点的末尾添加行
				let tr = $("table tr:last").clone();
				$("table").append(tr)
			}		
		</script>
	</head>

	<body>
		<table border="0" cellspacing="0" cellpadding="0" id="myTable">
			<tr id="row1">
				<td>书名</td>
				<td>价格</td>
			</tr>
			<tr id="row2">
				<td>看得见风景的房间</td>
				<td class="center">&yen;30.00</td>
			</tr>
			<tr id="row3">
				<td>60个瞬间</td>
				<td class="center">&yen;32.00</td>
			</tr>
		</table>
		<input name="b1" type="button" value="增加一行" onclick="addRow()" />
		<input name="b2" type="button" value="删除第2行" onclick="delRow()" />
		<input name="b3" type="button" value="修改标题样式" onclick="updateRow()" />
		<input name="b4" type="button" value="复制最后一行" onclick="copyRow()" />
	</body>

</html>